<script setup name="ComputeService">
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { imageUrl } from '@/utils/imageUrl'
// 假设 contentData 是从其他地方导入的数据
import { contentData, contentDataEnglish } from '@/assets/js/服务.js'
import { lStorage } from '@/utils/storage'

import { useTabsStore } from '@/store/modules/tabs'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const router = useRouter()

const isPC = ref(false)
const { t } = useI18n()

// 响应式状态
const tabs = ref(
	lStorage.get('language') === 'zh' ? contentData : contentDataEnglish
)

watch(
	() => lStorage.getReactive().value.language,
	(newVal) => {
		tabs.value = newVal === 'zh' ? contentData : contentDataEnglish
	}
)

const activeTab = ref('')
const observer = ref(null)

const isStartScrolling = ref(true)

// 监听标题的变化
watch(
	() => lStorage.getReactive().value.WX_ACTIVE_TAB,
	(newVal) => {
		nextTick(() => {
			const tab = newVal.split('/').filter(Boolean)
			if (newVal.includes('ComputeService') && tab.length > 1) {
				activeTab.value = tab[1]
			} else if (newVal.includes('ComputeServiceIndex')) {
				lStorage.set('temporaryPath', null)
				useTabsStore().setActiveTab(`/ComputeService`)
				activeTab.value = ''
			}
		})
	},
	{ immediate: true, deep: true } // 添加 immediate 选项处理初始值
)

// 监听标题的变化
watch(
	() => lStorage.getReactive().value.isStartScrolling,
	(newVal) => {
		nextTick(() => {
			isStartScrolling.value = newVal
		})
	},
	{ immediate: true, deep: true } // 添加 immediate 选项处理初始值
)

// 设置活跃标签
const setActiveTab = (id) => {}

const setupIntersectionObserver = () => {
	if (observer.value) observer.value.disconnect()

	// 添加延迟确保元素存在
	setTimeout(() => {
		const targets = tabs.value
			.map((tab) => document.getElementById(tab.id))
			.filter(Boolean)

		if (targets.length === 0) {
			return
		}

		observer.value = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						lStorage.set('temporaryPath', entry.target.id)
						lStorage.set('isStartScrolling', false)
						useTabsStore().setActiveTab(`/ComputeService/${entry.target.id}`)
					}
				})
			},
			{
				root: null,
				rootMargin: '-40px 0px -60% 0px',
				threshold: 0.01,
			}
		)

		targets.forEach((el) => {
			console.log('Observing element:', el.id) // 调试用
			observer.value.observe(el)
		})
	}, 0) // 100ms 延迟
}

let isScrolling = false
watch(activeTab, (newVal, oldVal) => {
	if (isStartScrolling.value) {
		if (isScrolling || newVal === oldVal) return

		isScrolling = true
		nextTick(() => {
			const target = document.getElementById(newVal)
			target?.scrollIntoView({
				behavior: 'smooth',
				block: 'center',
				inline: 'nearest',
			})
			setTimeout(() => (isScrolling = false), 500)
		})
	}
})
// AOS 初始化 + 滚动锚点处理
onMounted(async () => {
	await nextTick(() => {
		// 新锚点处理逻辑
		document.querySelectorAll('a[data-anchor]').forEach((anchor) => {
			anchor.addEventListener('click', function (e) {
				e.preventDefault()
				const targetId = this.dataset.anchor // 直接获取绑定的 ID
				setActiveTab(targetId) // 同步更新 activeTab 状态
			})
		})

		setTimeout(() => {
			// 检查 URL 或存储中的初始状态
			const initialTab = lStorage.get('temporaryPath') || ''
			if (initialTab) {
				activeTab.value = initialTab
				useTabsStore().setActiveTab(`/ComputeService/${initialTab}`)
			}
		}, 0)
		setupIntersectionObserver()
	}) // 等待下一个 tick 确保 DOM 更新

	// 判断设备类型（可根据需求调整阈值）
	isPC.value = window.matchMedia('(min-width: 992px)').matches

	// 监听窗口变化
	window.addEventListener('resize', () => {
		isPC.value = window.matchMedia('(min-width: 992px)').matches
	})
})

// 清理 Observer
onBeforeUnmount(() => {
	if (observer.value) {
		observer.value.disconnect()
	}
})

// 跳转到服务咨询页面
const goToServiceConsulting = () => {
	window.open('/ComputeService/ServiceConsulting', '_blank')
}
</script>

<template>
	<section class="products">
		<div
			class="product-card"
			v-for="(item, index) in tabs"
			:key="index"
			:class="{ reverse: index % 2 === 1 }"
			:id="item.id"
		>
			<div class="product-content" :class="{ reverse: index % 2 === 1 }">
				<div class="product-info">
					<h2>{{ item.title }}</h2>
					<p>{{ item.content }}</p>
					<div class="features-container">
						<div class="feature" v-for="(i, j) in item.data" :key="j">
							<div
								style="
									display: flex;
									align-items: flex-end;
									justify-content: space-between;
									height: 24px;
								"
							>
								<span>{{ i }}</span>
								<span
									class="btn"
									@click.sto="goToServiceConsulting"
									v-if="j === item.data.length - 1 && isPC"
								>
									{{ t('contactUsBtn') }}
								</span>
							</div>
						</div>
					</div>
				</div>
				<img
					class="product-image"
					:src="imageUrl(item.imgSrc, '计算服务')"
					:alt="item.title"
					loading="lazy"
				/>
			</div>
		</div>
	</section>
</template>

<style scoped lang="scss">
/*
 * ===========================================
 * 计算服务模板页面样式 - ComputeService/Template.vue
 * ===========================================
 */

.btn {
	display: inline-block;
	background: var(--button-outline-bg);
	color: var(--button-outline-text);
	border: 2px solid var(--button-outline-border);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	text-decoration: none;
	transition: all var(--transition-base);
	cursor: pointer;
	box-shadow: var(--shadow-sm);

	&:hover {
		background: var(--button-outline-hover-bg);
		color: var(--button-outline-hover-text);
		transform: translateY(-2px);
		box-shadow: var(--shadow-md);
	}

	&:active {
		transform: translateY(0);
		box-shadow: var(--shadow-xs);
	}
}

/* 产品区域样式 */
.products {
	background: var(--content-bg);
	padding: var(--space-20) 0;
	max-width: 1200px;
	margin: 0 auto;

	.product-card {
		background: var(--card-bg);
		border-radius: var(--radius-2xl);
		padding: var(--space-8);
		margin-bottom: var(--space-12);
		box-shadow: var(--card-shadow);
		border: 1px solid var(--card-border);
		transition: all var(--transition-base);

		&:hover {
			transform: var(--card-hover-transform);
			box-shadow: var(--card-hover-shadow);
		}

		&:last-child {
			margin-bottom: 0;
		}

		.product-content {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--space-12);
			align-items: center;

			&.reverse {
				.product-info {
					order: 2;
				}
				.product-image {
					order: 1;
				}
			}
		}

		.product-info {
			h2 {
				font-size: var(--font-size-2xl);
				font-weight: var(--font-weight-bold);
				color: var(--text-title);
				margin-bottom: var(--space-4);
				line-height: var(--line-height-tight);
			}

			p {
				font-size: var(--font-size-lg);
				color: var(--text-primary);
				line-height: var(--line-height-relaxed);
				margin-bottom: var(--space-6);
			}

			.features-container {
				.feature {
					color: var(--text-primary);
					font-size: var(--font-size-base);
					line-height: var(--line-height-relaxed);

					&:last-child {
						border-bottom: none;
						margin-bottom: 0;
					}

					span:first-child {
						font-weight: var(--font-weight-medium);
					}
				}
			}
		}

		.product-image {
			width: 100%;
			height: 320px;
			object-fit: initial;
			border-radius: var(--radius-xl);
			box-shadow: var(--shadow-lg);
			transition: all var(--transition-base);

			&:hover {
				transform: scale(1.02);
				box-shadow: var(--shadow-xl);
			}
		}
	}
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.products {
		padding: var(--space-16) var(--space-4);

		.product-card {
			padding: var(--space-6);
			margin-bottom: var(--space-10);

			.product-content {
				grid-template-columns: 1fr;
				gap: var(--space-8);

				&.reverse {
					.product-info,
					.product-image {
						order: unset;
					}
				}
			}

			.product-info {
				h2 {
					font-size: var(--font-size-xl);
					margin-bottom: var(--space-3);
				}

				p {
					font-size: var(--font-size-base);
					margin-bottom: var(--space-4);
				}
			}
		}
	}
}

@media (max-width: var(--breakpoint-md)) {
	.products {
		padding: var(--space-12) var(--space-3);

		.product-card {
			padding: var(--space-5);
			margin-bottom: var(--space-8);

			.product-content {
				gap: var(--space-6);
			}

			.product-info {
				h2 {
					font-size: var(--font-size-lg);
				}

				p {
					font-size: var(--font-size-sm);
				}

				.features-container .feature {
					margin-bottom: var(--space-2);
					font-size: var(--font-size-sm);
				}
			}
		}
	}

	.btn {
		padding: var(--space-2) var(--space-3);
		font-size: var(--font-size-xs);
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.products {
		padding: var(--space-10) var(--space-2);

		.product-card {
			padding: var(--space-4);
			margin-bottom: var(--space-6);

			.product-content {
				gap: var(--space-4);
			}

			.product-info {
				h2 {
					font-size: var(--font-size-base);
				}

				p {
					font-size: var(--font-size-xs);
				}

				.features-container .feature {
					font-size: var(--font-size-xs);
				}
			}
		}
	}
}

/* 移动端触摸优化 */
@media (hover: none) and (pointer: coarse) {
	.product-card {
		&:hover {
			transform: none;
		}

		&:active {
			transform: scale(0.98);
		}

		.product-image:hover {
			transform: none;
		}
	}

	.btn {
		&:hover {
			transform: none;
			background: var(--button-outline-bg);
		}

		&:active {
			background: var(--button-outline-hover-bg);
			color: var(--button-outline-hover-text);
		}
	}
}
</style>
